<template>
  <div class="box">
    <el-card shadow="always" :body-style="{ padding: '20px' }">
      <div slot="header">
        <el-row>
          <el-col :span="20">
            <span>{{ companyName }}</span>
          </el-col>
          <el-col :span="4">
            <el-row type="flex" justify="end">
              <!-- 两个内容 -->
              <el-col>负责人</el-col>
              <!-- 下拉菜单 element -->
              <el-col>
                <el-dropdown>
                  <span> 操作<i class="el-icon-arrow-down" /> </span>
                  <el-dropdown-menu slot="dropdown">
                    <el-dropdown-item @click.native="addDepartmentFn(null)">添加子部门</el-dropdown-item>
                  </el-dropdown-menu>
                </el-dropdown>
              </el-col>
            </el-row>
          </el-col>
        </el-row>
      </div>
      <el-tree :data="organizationChart" :props="defaultProps" @node-click="handleNodeClick">
        <template #default="{ data }">
          <el-row
            style="width: 100%;"
          >
            <el-col :span="20">
              <span>{{ data.name }}</span>
            </el-col>
            <el-col :span="4">
              <el-row type="flex" justify="end">
                <!-- 两个内容 -->
                <el-col>{{ data.manager }}</el-col>
                <el-col>
                  <!-- 下拉菜单 element -->
                  <el-dropdown>
                    <span> 操作<i class="el-icon-arrow-down" /> </span>
                    <!-- 下拉菜单 -->
                    <el-dropdown-menu slot="dropdown">
                      <el-dropdown-item @click.native="addDepartmentFn(data,2)">添加子部门</el-dropdown-item>
                      <el-dropdown-item @click.native="addDepartmentFn(data,1)">编辑部门</el-dropdown-item>
                      <el-dropdown-item @click.native="delDepartmentFn(data)">删除部门</el-dropdown-item>
                    </el-dropdown-menu>
                  </el-dropdown>
                </el-col>
              </el-row>
            </el-col>
          </el-row>
        </template>
      </el-tree>

      <!-- 没有子的人力部门 -->
      <!-- <el-row v-for="obj in organizationChart" :key="obj.id" :gutter="20">
        <el-col :span="20">
          <span>{{ obj.name }}</span>
        </el-col>
        <el-col :span="4">
          <el-row type="flex" justify="end"> -->
      <!-- 两个内容 -->
      <!-- <el-col>{{ obj.manager }}</el-col> -->
      <!-- 下拉菜单 element -->
      <!-- <el-col>
              <el-dropdown>
                <span> 操作<i class="el-icon-arrow-down" /> </span>
                <el-dropdown-menu slot="dropdown">
                  <el-dropdown-item>添加子部门</el-dropdown-item>
                </el-dropdown-menu>
              </el-dropdown>
            </el-col>
          </el-row>
        </el-col>
      </el-row> -->

    </el-card>
    <AddPop ref="addpop" :show="show" :department="department" :original-organizationchart="originalOrganizationChart" @closeFn="closePopFn" @addFm="getOrganizationChartFn" />
  </div>
</template>

<script>
import { getOrganizationChartAPI, delDepartmentAPI } from '@/api/departments'
import { listToTreeData } from '@/utils/index'
import AddPop from './compoments/add-pop.vue'
export default {
  name: 'Departments',
  components: {
    AddPop
  },
  data() {
    return {
      show: false, // 控制增加部门弹窗的显隐
      companyName: '',
      originalOrganizationChart: [], // 存储原始的部门架构
      organizationChart: [], // 存储排版好的部门架构
      // 架构规则
      defaultProps: {
        children: 'children',
        label: 'name'
      },
      department: {}// 储存点击的部门
    }
  },
  created() {
    // 获取人力架构
    this.getOrganizationChartFn()
  },
  // created: {

  //   // Fn() {
  //   //   console.log(111)
  //   //   this.getOrganizationChartFn()
  //   // }

  // },
  methods: {
    // 获取人力架构
    async getOrganizationChartFn() {
      const { companyName, depts } = await getOrganizationChartAPI()
      this.companyName = companyName
      this.originalOrganizationChart = depts
      this.organizationChart = listToTreeData(depts)
      // console.log(res)
    },
    handleNodeClick(data) {
      console.log(data)
    },
    // 删除部门
    // 准备
    /**
     * 1.判断是否有子部门
     * 2.询问是否删除提示框
     * 3.确认后删除并提示删除成功
     * 4.重新获取数据
     */
    delDepartmentFn(data) {
      if (data.children && data.children.length > 0) {
        return this.$message.error('有子元素不能删除')
      }
      this.$confirm(`确认删除${data.name}`).then(async() => {
        await delDepartmentAPI(data.id)
        this.$message.success('删除成功')
        this.getOrganizationChartFn()
      }).catch(() => {
        return
      })
    },
    // 弹出增加部门弹窗 val:点击的部门
    addDepartmentFn(val, iff) {
      this.show = true
      this.department = val
      console.log('点击的部门', val)
      if (iff === 1) {
        this.$refs.addpop.getDepartDetailFn(val.id)
      }
    },
    // 关闭增加部门弹窗
    closePopFn() {
      this.show = false
    }
  }

}
</script>

<style lang="scss" scoped>
 ::v-deep .el-tree-node__content{
  margin: 10px 0;
 }
</style>
